<template>
 <div class="login_container">
   <div class="login_box">
     <!-- 头像区域 -->
     <div class="avatar_box">
       <img src="../assets/logo3.png" alt="">
     </div>
     <div class="form">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="手机号:" prop="userPhone">
           <el-input v-model="form.userPhone" placeholder="请输入手机" prefix-icon="el-icon-phone"></el-input>
         </el-form-item>
         <el-form-item label="验证码" prop="code">
            <el-input v-model="form.code" placeholder="验证码" prefix-icon="el-icon-info" ></el-input>
         </el-form-item>
         <el-form-item>
		   <el-button type="primary"  @click="getCode">发送验证码</el-button>	 
           <el-button type="primary"  @click="loginByPhoneCheck">登陆</el-button>
		   <el-link type="primary"><router-link to="/Login">账号密码登陆</router-link></el-link>
         </el-form-item>
       </el-form>
     </div>
   </div>
 </div>
</template>

<script >
import {loginByPhone} from '../api/login.js'
export default{
  name: 'LoginByPhone',
  data () {
    return {
      form: {
        userPhone: '',
		code:''
      },
	  rules: {
	    userPhone: [
	      { required: true, message: '请输入手机号', trigger: 'blur' },
	      { min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur' }
	    ]
	  }
    }
  },
  methods: {
	getCode(){
		console.log("获取验证码");
		this.$refs.form.validate((valid) => {
		  if (valid) {
		    console.log('表单校验成功')
		    loginByPhone(this.form.userPhone).then(res=>{
				this.$message.success(res.msg)
			})
		  }
		})
	},
    loginByPhoneCheck () {
		console.log("短信验证");
		this.$refs.form.validate((valid) => {
		  if (valid) {
		    console.log('表单校验成功')
		    this.$store.dispatch('LoginByPhoneCheck', this.form).then(() => {
		      this.$router.push('/home')
		    }).catch(e => {
		      console.log(e)
		    })
		  }
		})
	},  
  }
}

</script>

<style scoped>
  .login_container{
    /* background-color: #2b4b6b; */
    background:url('../assets/beijing2.jpg') no-repeat;
    background-size: 100% auto;
    width:100%;
    height:100%;
  }
  .login_box{
    position: absolute;
    width: 450px;
    height: 350px;
    background-color: #fff;
    border-radius: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .avatar_box{
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
  }
  .avatar_box img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
  .form{
    margin: 20% 10px ;
  }

</style>
